<template>
  <div class="home">
    <div class="main">
      <router-view/>
    </div>
    <div class="bt">
      <router-link v-for="(item,index) in list " :key="index" :to="item.path" tag="p" active-class="active">
        {{item.title}}
      </router-link>
    </div>
    
  </div>
</template>

<script>
export default {
  data(){
    return {
      list:[
        {
          path:'/index',
          title:'首页'
        },
        {
          path:'/my',
          title:'我的'
        }
      ]
    }
  }

}
</script>

<style lang='scss' scoped>
.home{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .main{
    flex: 1;
  }
  .bt{
    width: 100%;
    height: 50px;
    display: flex;
    line-height: 50px;
    justify-content: space-around;
    .active{
      color: tomato;
    }
  }
}

</style>